import { list, payTest,payTestOrder } from '@/api/pay/payTest/payTest'

import payTestModal from '../payTestModal.vue' // 二维码对话框组件
import payTestBarCode from '../payTestBarCode.vue' // 条码对话框组件
export default {
  props: {},
  components: { payTestModal, payTestBarCode},
  data () {
    return {
      mchAppList: [], // app列表
      appId: '', // 已选择的appId
      appPaywayList: [], // 商户app支持的支付方式
      currentWayCode: '', // 以何种方式进行支付，默认是微信二维码
      currentPayDataType: '', // 支付参数
      mchOrderNo: '', // 模拟商户订单号
      authCode: '', // 条码的值
      paytestAmount: '0.01', // 支付金额，默认为0.01
      noConfigText: false, // 尚无任何配置分割线提示文字
      divisionMode: 0, // 订单分账模式
      orderTitle: '接口调试', // 订单标题
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getList();
  },
  mounted () {
    // 在进入页面时刷新订单号
    this.randomOrderNo()
  },
  methods: {
    getList(){
      this.loading = true;
      this.queryParams.params = {};
      // 请求接口，获取所有的appid，只有此处进行pageSize=-1传参
      list(this.queryParams).then(res => {
        this.mchAppList = res.rows
        this.total = res.total;
        // 如果列表不为空，设置默认选中第一个选项
        if (this.mchAppList && this.mchAppList.length > 0) {
          this.queryParams.appId = this.mchAppList[0].appId;
          this.appId = this.mchAppList[0].appId;
          // 根据appId的值，动态显示支付方式
          this.appPaywayListHandle(this.appId);
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    // 支付板块是否展示
    payTestShow () {
      // 如果未选择appid，或者支付方式列表为0，则不显示支付体验板块
      if (this.appId === '' || this.appPaywayList.length === 0) {
        return false
      } else {
        return true
      }
    },

    changeCurrentWayCode (wayCode, currentPayDataType) { // 切换支付方式
      this.currentWayCode = wayCode
      this.currentPayDataType = currentPayDataType
    },

    // 变更 appId的事件
    changeAppId (value) {
      // 更新当前选中的appId
      this.appId = value
      
      // 重置当前支付方式
      this.currentWayCode = ''
      this.currentPayDataType = ''
      this.authCode = ''
      
      // 根据appId的值，动态显示支付方式
      this.appPaywayListHandle(value)
      
      // 刷新订单号
      this.randomOrderNo()
    },

    // 刷新订单号
    randomOrderNo () {
       // 获取当前时间
       const now = new Date();
       // 格式化时间 yyyyMMddHHmmss
       const year = now.getFullYear();
       const month = String(now.getMonth() + 1).padStart(2, '0');
       const day = String(now.getDate()).padStart(2, '0');
       const hours = String(now.getHours()).padStart(2, '0');
       const minutes = String(now.getMinutes()).padStart(2, '0');
       const seconds = String(now.getSeconds()).padStart(2, '0');
       const timestamp = `${year}${month}${day}${hours}${minutes}${seconds}`;
       
       // 添加随机数
       const randomNum = Math.floor(Math.random() * (9999 - 1000) + 1000);
       
       // 组装订单号: SYF前缀 + 时间戳 + 随机数
       this.mchOrderNo = 'SYF' + timestamp + randomNum;
    },

    // 获取条码的值
    barCodeChange (value) {
      this.authCode = value
      this.immediatelyPay()
    },

    // 根据不同的appId展示不同的支付方式(在下拉框切换时和在携带参数进入页面时调用)
    appPaywayListHandle (value) {
      if (!value) {
        this.appPaywayList = []
        return false
      }
      const that = this
      payTest(value).then(res => {
        that.appPaywayList = res.data
        if (res.length === 0) {
          that.noConfigText = true
        } else {
          that.noConfigText = false
        }
      })
    },
    // 立即支付按钮
    immediatelyPay () {
      // 判断支付金额是否为0 this.paytestAmount
      if (!this.paytestAmount || this.paytestAmount === 0.00) {
         return this.$modal.msgError("请输入支付金额");
      }

      // 判断是否选择支付方式
      if (this.currentWayCode === '') {
        return this.$modal.msgError('请选择支付方式')
      }

      // 请输入订单标题
      if (!this.orderTitle || this.orderTitle.length > 20) {
        return this.$modal.msgError('请输入正确的订单标题[20字以内]')
      }
      console.log('this.currentWayCode',this.currentWayCode)
      // 判断是否为条码支付
      if (!this.$refs.payTestBarCode.getVisible() && (this.currentWayCode === 'WX_BAR' || this.currentWayCode === 'ALI_BAR' || this.currentWayCode === 'AUTO_BAR')) {
          this.$refs.payTestBarCode.showModal()
          return
      }

      const that = this
      payTestOrder({
        // jsapi 默认使用聚合二维码支付
        wayCode: this.currentWayCode, // 支付方式
        amount: this.paytestAmount, // 支付金额
        appId: this.appId, // appId
        mchOrderNo: this.mchOrderNo, // 订单编号
        payDataType: this.currentPayDataType, // 支付参数（二维码，条码）
        authCode: this.authCode,
        divisionMode: this.divisionMode,
        orderTitle: this.orderTitle
      }).then(res => {
        console.log('父组件',res)
        // 打开弹窗
        that.$refs.payTestModal.showModal(this.currentWayCode, res)
        that.randomOrderNo() // 刷新订单号
      }).catch(() => {
        that.$refs.payTestBarCode.processCatch()
        that.randomOrderNo() // 刷新订单号
      })
    },

    // 此处判断，微信，支付宝，聚合码，哪种支付方式一个都没配置，如果未配置，则不显示该板块，若等于-1 则表示不存在
    showTitle (parameterA) {
        if (this.appPaywayList.toString().indexOf(parameterA) === -1) {
          return false
        } else {
          return true
        }
    },
    // 聚合支付标题显示
    showQtTitle () {
      if (this.appPaywayList.toString().indexOf('WX') !== -1 || this.appPaywayList.toString().indexOf('ALI') !== -1 || this.appPaywayList.toString().indexOf('PP_PC') !== -1) {
          return true
        } else {
          return false
        }
    },

    // 自定义金额输入框是否展示
    amountInputShow () {
      this.$nextTick(() => { // 输入框默认展示焦点
        this.$refs.amountInputFocus.focus()
      })
      this.amountInput = true
      this.paytestAmount = ''
    },

    // 条码弹窗点击x或者蒙版关闭
    testCodeChange () {
      this.randomOrderNo() // 刷新订单号
    },
    handleCloseBarCode () {
      this.$refs.payTestBarCode.visible = false
    }
  }
}
